<script setup lang="ts">
    import { ref } from 'vue';
    import { NoticeItem } from '@/services/type';

    import { useUserStore } from '@/stores/user';

    import moment from 'moment';
    
    const { data } = defineProps<{data: NoticeItem}>();

    const userStore = useUserStore();

    const isFollow = ref(data.root_user_info.is_follow);

    // 关注
    const handleFollow = async (yhnm?: string, is_follow?: boolean) => {
        const response = await userStore.follow(yhnm, is_follow);
        if(response.code === 0) {
            // 变更关注状态
            isFollow.value = !isFollow.value;
        }
    }

</script>
<template>
    <div class="fans-content">
        <div class="user-icon">
            <img :src="data.root_user_info.avatar" />
            <!-- <span v-show="data.is_read === 0">
                <i>new</i>
            </span> -->
        </div>
        <div class="fans-box">
            <div class="fans-left">
                <div class="fans-on">
                    <span><a :href="'/u/' + data.root_user_info.yhnm" target="_blank">{{data.root_user_info.nickName}}</a></span>
                </div>
                <div class="fans-content">
                    <span>关注了你</span>
                </div>
                <div class="fans-down">
                    <span class="time">{{ moment(data.remind_time).startOf('minute').fromNow() }}</span>
                </div>
            </div>
            <div class="fans-right">
                <a class="fans-but" v-if="!isFollow" @click="handleFollow(data.root_user_info?.yhnm, isFollow)">回关</a>
                <a class="fans-but follow" v-if="isFollow" @click="handleFollow(data.root_user_info?.yhnm, isFollow)">已关注</a>
            </div>
        </div>     
    </div>
</template>
<style lang="less" scoped>

    .fans-content {
        display: flex;
        .user-icon {
            width: 40px;
            height: 40px;
            position: relative;
            span {
                font-size: .8em;
                line-height: 1.2;
                padding: 0.1em 0.4em;
                min-width: 0.8em;
                min-height: 0.8em;
                display: inline-block;
                vertical-align: 0.1em;
                border-radius: 50px;
                background: var(--this-bg);
                color: var(--this-color);
                top: 5px;
                --this-color: #fff;
                text-align: center;
                --this-bg: #fe3459;
                z-index: 1;
                position: absolute;
                margin-left: -25px;
                margin-top: -6px;
            }
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: inline-block!important;
                overflow: hidden;
            }
        }
        .fans-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            .fans-left {
                margin-left: 6px;
                .fans-on {
                    span, a {
                        color: #000;
                        font-size: 13px;
                    }
                    a:hover {
                        color:#1890FE;
                    }
                }
                .fans-content {
                    span {
                        font-size: 12px;
                    }
                }
                .fans-down {
                    span {
                        font-size: 10px;
                    }
                }
            }
            .fans-right {
                a {
                    color: #f9f6f6;
                    width: 30px;
                    height: 15px;
                    border-radius: 12px;
                    padding: 6px 16px;
                    background-color: #fe2c55;
                    border-radius: 10px;
                    align-items: center;
                    margin: 0;
                    font-size: 12px;
                    line-height: 23px;
                    display: flex;
                    justify-content: space-evenly;    
                }
                .follow {
                    background-color: rgb(243, 244, 245);
                    color: #8a919f;
                    width: 40px;
                    border-color: rgb(197, 200, 207);
                }
                .follow:hover {
                    background-color: #8a919f;
                    color: #ffffff;
                }
            }
        }
    }

</style>